<template>
  <!-- 添加或修改付款申请单对话框 -->
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>采购单（{{buy.nos}}）采购明细</span>
      </div>
      <el-table border v-loading="loading" :data="buyDetailList" ref="table" show-summary :summary-method="getSummaries">
        <el-table-column label="序号" type="index" align="center" width="50" fixed="left"/>
        <el-table-column  label="采购单号" align="center" prop="lvBuy.nos"/>
        <el-table-column  label="产品名称" align="center" prop="goodsName"  show-overflow-tooltip/>
        <el-table-column  label="产品型号" align="center" prop="goodsModel"/>
        <el-table-column label="产品明细" align="center" prop="goodsCode"/>
        <el-table-column label="单价" align="center" prop="buyDetail.goodsBuyPrice"/>
        <el-table-column label="数量" align="center" prop="buyDetail.shengyu"/>
        <el-table-column label="源单金额" align="center" prop="buyDetail.goodsBuyTotal"/>
        <el-table-column label="申请金额" align="center" prop="money"/>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getBuyDetailList"/>
    </el-card>
  </div>
</template>

<script>
import {accAdd, addAction, getAction, getById, updateAction} from '@/api/manage';
import moment from 'moment';
import {parseTime} from "@/utils/common";

export default {
  name: "BuyGoodsList",
  dicts: [],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      buy: {},
      // 是否显示弹出层
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        mainId: null,
      },
      // 总条数
      total: 0,
      // 表单参数
      buyDetailList: [],
      url: {
        getById: '/lvBuy/lvBuy/',
        buyDetailList: '/payApplyBuyDetail/payApplyBuyDetail/list',
      },
    };
  },
  created() {
  },
  props: {
    buyId: {
      type: String,
      default: null
    },
    applyId: {
      type: String,
      default: null
    },
  },
  watch: {
    applyId: {
      deep: true,
      immediate: true,
      handler (val, oldVal) {
        if (val !== oldVal) {
          // 页面元素 加载后渲染
          this.$nextTick(() => {
            this.getBuyDetailList();
            this.getBuyDetail();
          })
        }
      }
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
    },

    /** 查询销售信息管理列表 */
    getBuyDetailList() {
      this.queryParams.buyId = this.buyId;
      this.queryParams.applyId = this.applyId;
      this.loading = true;
      getAction(this.url.buyDetailList, this.queryParams).then(response => {
        this.buyDetailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    getBuyDetail(){
      const id = this.buyId;
      getById(this.url.getById, id).then(response => {
        this.buy = response.data;
      });
    },

    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        let values ;
        if(column.property === "buyDetail.goodsBuyTotal"){
          values = data.map((item) => Number(item.buyDetail.goodsBuyTotal));
        }else{
          values = data.map((item) => Number(item[column.property]));
        }
        // 只合计amount1和amount3，想合并哪些列就在这里指定
        if ( column.property === "money" || column.property === "buyDetail.goodsBuyTotal") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return accAdd(prev , curr);
            } else {
              return prev;
            }
          }, 0);
        }
      });
      return sums;
    },







  }
};
</script>
